{% extends 'mac_basic.html' %}


{% block title %}
    修改密码
{% endblock %}


{% block css %}
    <style>
        .form {
            position: relative;
            width: 500px;
            margin-top: 51px ;
            margin-left: 150px;
        }
        .user-pwd{
            padding-left: 50px;
            padding-bottom: 10px;
            border-bottom: 3px solid #8B8989;
        }
        .error {
            position: absolute;
            left: 105px;
            top: -21px;
            color: red;
        }
    </style>
{% endblock %}


{% block content %}
    <div class="user-pwd">
        <h3>密码<small> 修改</small></h3>
    </div>
    <div class="form">
        <form method="post" action="{% url 'user_password_edit' %}" class="form-horizontal">
          <div class="form-group error">
            <div id="user-pwd">{{ error }}</div>
          </div>
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">原来密码</label>
            <div class="col-sm-10">
              <input type="password" name="oldpwd" value="{{ oldpwd }}" class="form-control user-pwd1" id="inputEmail3" placeholder="请输入原来密码">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">现在密码</label>
            <div class="col-sm-10" style="position: relative">
              <input type="password" name="newpwd" class="form-control user-pwd1" id="inputPassword3" placeholder="请输入现在密码">
              <span class="pwd_tips" style="color: #00CED1; font-size: 10px; position: absolute">温馨提示: 密码长度至少6位</span>
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword4" class="col-sm-2 control-label">确认密码</label>
            <div class="col-sm-10">
              <input type="password" name="newpwd2" class="form-control user-pwd1" id="inputPassword4" placeholder="再次输入密码">
            </div>
          </div>
          <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default" disabled="disabled">确 定</button>
    </div>
  </div>
    </form>
    </div>

{% endblock %}


{% block js %}
    <script>
        $('.user-pwd1').focus(function () {
            $('#user-pwd').text('')
        })
        $('#inputPassword3').keyup(function () {
            var $pwdVal = $(this).val()
            var $button = $('button[type=submit]')
            if ($pwdVal.length >= 6) {
                $button.removeAttr('disabled')
            }else {
                $button.attr('disabled', 'disabled')
            }
        })
    </script>
{% endblock %}